<template>
    <div class="_swiper padding-10" style="min-width: 200px">
        <div class="flex-c">
            <div class="imageContainer size-100 margin-right-15" v-for="(image,index) in  form.images">
                <div class="close" style="position: relative">
                    <i class="iconfont icon-close" @click="deelteimage(index)"></i>
                </div>
                <upload-image :value="image" @change="(_image)=>changeImage(_image,index)"></upload-image>
            </div>
        </div>

        <div class="margin-top-bottom-10 ">
            <el-button @click="addImage" circle><i class="iconfont icon-tianjia "></i></el-button>
        </div>
        <div class="">
            <el-button @click="onSubmit">提交</el-button>
        </div>
    </div>

</template>
<script>
    import {createProp} from "../util/util";
    import {findParentComponent} from "../util/findComponent";
    import * as myalert from '../util/myalert'

    export default {
        props: {
            item: createProp([Object])
        },
        components: {
            "upload-image": () => import('./image-upload')
        },
        data() {
            return {
                form: {
                    images: []
                },

            }
        },
        mounted() {
            if (this.item && this.item.props && this.item.props.images) {
                this.form.images = this.item.props.images
            }

        },
        methods: {
            deelteimage(index) {
                var self = this
                myalert.confirm("确定吗").then(isyes => {
                    if (isyes.confirm) {
                        self.form.images.splice(index, 1)
                    }
                })
            },
            changeImage(image, index) {
                if (!this.form.images) {
                    this.form.images = []
                }
                this.form.images[index] = image

            },
            onSubmit() {
                var parent = findParentComponent(this, 'editAllParent')
                var index = parent.resultList.findIndex(item => this.item.id === item.id)
                parent.resultList[index].props = {
                    ...this.form
                }
                parent.resultList[index].isShowEdit = false
            },
            addImage() {
                if (!this.form.images) {
                    this.form.images = []
                }
                this.form.images.push('http://qiniu.liumingtai.com/157707089201301736.png')
            },
        }
    }
</script>
<style lang="scss" scoped>
    .imageContainer {

    }

    .icon-close {
        z-index: 99;
        position: absolute;
        right: -10px;
        top: -10px;
    }
</style>
